import React, { Component } from 'react'
import { BackHandler, RefreshControl, TouchableOpacity, Alert, Text, ScrollView, View, Picker, ActivityIndicator} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'
import Button from '../Components/Button'
import TextInput from '../Components/TextInput'
import { connect } from 'react-redux'

import CommodityDetailActions from '../Redux/CommodityDetailRedux'
import AddressActions from '../Redux/AddressRedux'
import CallActions from '../Redux/CallRedux'

import SingleAddress from '../Components/SingleAddress'
import SingleCommodity from '../Components/SingleCommodity'

import styles from './Styles/RealtimeScreenStyle'

class RealtimeScreen extends Component {
  static navigationOptions = {
    title: '实时发单'
  }
  constructor(props) {
    super(props)
    const { state } = this.props.navigation
    const adcode = this.props.city ? this.props.city.adcode : null
    this.props.getCommodity(state.params.id, adcode)
    this.state = {
      commodityId: state.params.id,
      address: null,
      refreshing: false,
    }
  }
  componentWillMount() {
    this.getAddress()
  }
  componentDidMount() {
    this.props.getAddress(this.props.token)
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }
  getAddress() {
    console.tron.log(this.props.address)
    if (this.props.address.payload) {
      const address = this.props.address.payload[this.props.address.active]
      this.setState({address:address})
    }
  }
  _onRefresh() {
    this.setState({refreshing:true})
    const adcode = this.props.city ? this.props.city.adcode : null
    this.props.getCommodity(this.state.commodityId, adcode)
    this.getAddress()
  }
  _makeOrder = () => {
    this.props.makeOrder(
      this.state.address.id,
      this.props.commodity.id,
      'submit_order',
      this.props.token)
  }
  componentDidUpdate(prevProps, prevState) {
    if(prevProps.call.fetching
      && this.props.call.payload) {
      this.props.navigation.navigate('OrderDetailScreen',
        {id:this.props.call.payload.id})
      //this.props.navigation.navigate('RealtimeSuccessScreen')
    }
    if(prevState.refreshing
      && !this.props.commodity.fetching
    ) {
      this.setState({refreshing:false})
    }
    if(prevProps.address !== this.props.address) {
      this.getAddress()
    }
  }
  render () {
    if (this.props.commodity.fetching) {
      return <ActivityIndicator style={{marginTop:20}} />
    }
    const { navigate, goBack } = this.props.navigation
    let addressView = null
    if(this.state.address) {
      addressView = (
        <SingleAddress
          style={{marginTop:0}}
          data={this.state.address}
          navigation={this.props.navigation} />
      )
    } else {
      addressView = (
        <TouchableOpacity
          onPress={()=>navigate('WebScreen', {title:'添加地址',link:'http://jk.chirongkeji.com/api/address/add_address?token='+this.props.token})}
          style={styles.emptyAddress}>
          <Icon name='plus' style={styles.emptyAddressIcon} />
          <Text>点击添加地址</Text>
        </TouchableOpacity>
      )
    }
    let buttonView = null
    if (!this.state.address || !this.state.commodityId) {
      buttonView = <Button title='提交' disabled />
    } else if (this.props.call.fetching) {
      buttonView = <Button title='提交中...' />
    } else {
      buttonView = <Button title='提交' onPress={this._makeOrder} />
    }
    return (
      <ScrollView style={styles.container}
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)} />
        }>
        {this.props.commodity.payload &&
        <SingleCommodity
          navigation={this.props.navigation}
          data={this.props.commodity.payload} />}
        {addressView}
        <View style={styles.button}>
          {buttonView}
        </View>
      </ScrollView>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    city: state.city.payload,
    token: state.user.payload.token,
    commodity: state.commodityDetail,
    address: state.address,
    call: state.call,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getAddress: (token) => dispatch(AddressActions.getAllRequest(token)),
    makeOrder: (addressId, commodityId, orderType, token) => dispatch(CallActions.callRequest(addressId, commodityId, orderType, token)),
    getCommodity: (id,adcode) => dispatch(CommodityDetailActions.commodityDetailRequest(id,adcode))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(RealtimeScreen)
